<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <%--<link rel="stylesheet" type="text/css" href="../../lib/ueditor/laydate.css"/>--%>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/dept/deptManagement.css"/>
    <link rel="stylesheet" type="text/css" href="../../lib/easyui/themes/easyui.css"/>
    <link rel="stylesheet" type="text/css" hcont_rigref="../../lib/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/news/center.css"/>
    <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js"></script>
    <%--<script src="../../lib/laydate.js"></script>--%>
    <%--<script type="text/javascript" src="../lib/easyui/jquery.easyui.min.js"></script>--%>
    <%--<script type="text/javascript" src="../lib/easyui/tree.js"></script>--%>
    <%--<script type="text/javascript" src="../js/index.js"></script>--%>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../js/base/base.js"></script>
    <script src="../../lib/highcharts.js"></script>

    <title>离职管理</title>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<style>
    body,html{
        width:100%;
        height:100%;
    }
    .left,.right{
        float: left;
    }
    .cl{
        clear:both;
    }

    .info{
        padding-left:10px;
        border:1px solid #eee;
    }
    .h2{
        height:43px;
        line-height: 43px;
        font-size: 18px;
        padding-left:50px;

    }
    .basicInfo,.otherInfo{
        height:50px;
        line-height: 50px;
    }
    .basicInfo{
        border-bottom: 1px solid #eee;
    }
    .tit{
        width:100px;
        background:#ddd;
        border-right:1px solid #eee;
        text-align: center;
    }
    ul li{
        margin:0 10px;
    }
    #btn{
        position: absolute;
        top: 10px;
        line-height: 30px;
        width:60px;
        height:30px;
        border:1px solid #ddd;
        border-radius: 4px;
        background: #eee;
        margin-left:10px;
    }
    .add{
        color:#0000ee;
    }
    .clear{
        color:#f00;
    }
    #dept{
        margin-top:6px;
    }
    table,th,tr,td{
        border:1px solid #eee;
        border-collapse:collapse;
    }
    .table{
        width:60%;
        margin: 10px auto;
    }
    td{
        width:50%;
    }
    .leftTd{

    }
    th{
        height:50px;
    }
    .imgDiv{
        text-align: center;
        margin-top: 60px;
    }
</style>
<body style="overflow:scroll;overflow-x:hidden;">
<div class="head"><h2 class="h2">离职管理</h2></div>
<div class="info">
    <div class="basicInfo">
        <div class="left tit">基本信息：</div>
        <ul class="right" id="radio">
            <li class="left"><label for="quitType"><input type="radio" id="quitType" value="quitType" checked>离职类型</label></li>
            <li class="left"><label for="quitTimeFact"><input type="radio" id="quitTimeFact" value="quitTimeFact">离职年份</label></li>
        </ul>
    </div>
    <div class="cl"></div>
    <div class="otherInfo">
        <div class="left">
            <div class="left tit">统计图：</div>
            <ul class="right" id="radio1">
                <li class="left"><label for="pie"><input type="radio" class="tableType" id="pie" value="pie" checked>饼图</label></li>
                <li class="left"><label for="bar"><input type="radio" class="tableType" id="bar" value="bar">柱状图</label></li>
                <li class="left"><label for="table"><input type="radio" class="tableType" id="table" value="table">统计表</label></li>
            </ul>
        </div>
        <div class="right">
            <div class="left tit">所属部门：</div>
            <div class="right">
                <div class="depts left">
                    <textarea name="dept" id="dept" disabled cols="50" rows="2" deptid=""></textarea>
                    <span id ="add" class="add">添加</span>
                    <span id ="clear" class="clear">清空</span>
                </div>
                <div class="btn right" style="position: relative;">
                    <button id="btn">确定</button>
                </div>
            </div>
        </div>
    </div>

</div>
<div id="container" style="min-width:400px;height:400px">

</div>
</body>
<script type="text/javascript">

    //清空部门控件
    $(".clear").on("click",function(){
        $("#dept").val("");
        $("#dept").attr("deptid","");
    })

    /* 选部门控件 */
    $("#add").on("click",function(){//所在位置
        dept_id = "dept";
        $.popWindow("../../common/selectDept");
    });
    //选择基本信息
    $("#radio").on("click","li",function(){
        $(this).siblings().find("input").removeProp("checked");
    })
    //选择图表类型
    $("#radio1").on("click","li",function(){
        $(this).siblings().find("input").removeProp("checked");
    })
    //点击确认
    //获取图表标题
    function tit(n){
        switch (n){
            case "quitType":
                return "离职类型";
            case "quitTimeFact":
                return "离职年份";
            default :
                return "离职类型";
        }

    }
    function turn(n){
        if(n==undefined||n==""){
            return "其他";
        }else{
            return n;
        }
    }
    //点击确定查询
    $(".btn").on("click",function(){
        ajaxData()

    })
    //查询数据
    function ajaxData(){
        //获取选择的基本信息
        var info =  $("#radio li input:checked").val();
        var table = $("#radio1 li input:checked").val();
        var deptId =$("#dept").attr("deptid");
        function getData(n){
            switch (n){
                case "quitType":
                    return {
                        quitType:1,
                        deptId:deptId
                    };
                case "quitTimeFact":
                    return {
                        quitTimeFact:1,
                        deptId:deptId
                    };
                default :
                    return {
                        quitType:1,
                        deptId:deptId
                    };
            }

        }
        var data = getData(info)
        $.ajax({
            url:"/hr/manage/selLeaveNums",
            type:"post",
            dataType:"json",
            data:data,
            success:function(res){
                var arr1=[],arr2=[],arr3=[],totleNum=0,str="";//arr1x轴，arr2y轴,arr3饼状图，totleNum总数
                $("#container").html("");
                if(res.flag){
                    if(res.obj.length>0) {
                        for (i = 0; i < res.obj.length; i++) {
                            if (info == "quitType") {
                                arr1.push(turn(res.obj[i].quitTypeName));
                                arr3.push({name: turn(res.obj[i].quitTypeName), y: res.obj[i].nums});
                            } else if (info == "quitTimeFact") {
                                arr1.push(turn(res.obj[i].quitTimeFactYear));
                                arr3.push({name: turn(res.obj[i].quitTimeFactYear), y: res.obj[i].nums});
                            }
                            arr2.push(res.obj[i].nums)
                            totleNum += res.obj[i].nums;

                        }
                        if (table == "pie") {
                            var chart = Highcharts.chart('container', {
                                chart: {
                                    plotBackgroundColor: null,
                                    plotBorderWidth: null,
                                    plotShadow: false,
                                    type: 'pie'
                                },
                                title: {
                                    text: "按" + tit($("#radio li input:checked").val()) + "查询" + "(" + totleNum + "人）"
                                },
                                tooltip: {
                                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                                },
                                plotOptions: {
                                    pie: {
                                        allowPointSelect: true,
                                        cursor: 'pointer',
                                        dataLabels: {
                                            enabled: false
                                        },
                                        showInLegend: true
                                    }
                                },
                                series: [{
                                    name: '百分比',
                                    colorByPoint: true,
                                    data: arr3
                                }]
                            });
                        } else if (table == "bar") {
                            var chart = Highcharts.chart('container', {
                                chart: {
                                    type: 'column'
                                },
                                title: {
                                    text: "按" + tit($("#radio li input:checked").val()) + "查询" + "(" + totleNum + "人）"
                                },
                                subtitle: {
                                    text: ''
                                },
                                xAxis: {
                                    categories: arr1,
                                    crosshair: true
                                },
                                yAxis: {
                                    min: 0,
                                    title: {
                                        text: '人数（人）'
                                    }
                                },
                                tooltip: {
                                    // head + 每个 point + footer 拼接成完整的 table
                                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                    pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' +
                                    '<td style="padding:0"><b>{point.y:1f} 人</b></td></tr>',
                                    footerFormat: '</table>',
                                    shared: true,
                                    useHTML: true
                                },
                                plotOptions: {
                                    column: {
                                        borderWidth: 0
                                    }
                                },
                                series: [{name: tit($("#radio li input:checked").val()), data: arr2}]
                            });
                        } else {
                            str += "<table class='table'><thead><tr><th  colspan='2'>按" + tit($("#radio li input:checked").val()) + "查询" + "(" + totleNum + "人）</th></tr></thead><tbody>";
                            for (i = 0; i < arr3.length; i++) {
                                str += "<tr><td class='leftTd'>" + arr3[i].name + "</td><td>" + arr3[i].y + "</td></tr>"
                            }
                            str += "<tr><td class='leftTd'>总计</td><td>" + totleNum + "</td></tr></tbody></table>";
                            $("#container").html(str)

                        }

                    }else{
                        $("#container").html('<div class="imgDiv"><img class="noneImg" src="/img/main_img/shouyekong.png" alt=""><div>暂无数据</div></div>')
                    }

                }else{
                    console.log("后台错误")
                }

            }


        })
    }
    //初始化
    ajaxData();
    //点击图标类型
    $(".tableType").change(
        function(){
            ajaxData()
        }
    )

</script>

</html>
